<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="box" data-id="10" data-name="div">盒子</div>
<ul>
    <li data-id="1">1</li>
    <li data-id="2">2</li>
    <li data-id="3">3</li>
    <li data-id="4">4</li>

</ul>
<script>
    const div = document.querySelector(".box")
    console.log(div.dataset) // 自定义属性的集合
    console.log(div.dataset.id) // 自定义属性的第一种获取方式
    console.log(div.getAttribute("data-id"))// 自定义属性的第二种获取方式

    const lis = document.querySelectorAll("ul>li")
    for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener("click", function () {
            console.log(this.dataset.id)
        })
    }
</script>
</body>
</html>